/*
import func from './vue-temp/vue-editor-bridge';
import func from './vue-temp/vue-editor-bridge';
 * @Author: chase 
 * @Date: 2018-09-08 11:03:38 
 * @Last Modified by: chase
 * @Last Modified time: 2018-09-13 11:07:03
 * shullet
 */

<template>
    <!-- 创建和编辑查看弹窗 -->
    <el-dialog :title="WireList.title" v-dialogDrag :visible.sync="WireList.ifshow" class="tems_dialog" width="1200px" :close-on-click-modal="false">
        <el-form :model="formValidate"  style="position:relative" :rules="ruleValidate" ref="formValidate" label-width="140px" class="demo-ruleForm">
            
            <canvas id="myCanvas" style="position:relative;top:0;left:0;" width="1000px" height = "500px">
                <!-- <div style="width:50px;height:50px;border:1px solid red"></div> -->
            </canvas>
            <div v-for="(item, index) in draws" :key="item.index" v-canvasDrag :style="{position: 'absolute', backgroundColor:'#fff', top: item.top + 'px', left: item.left  + 'px', width: item.width  + 'px', height: item.height  + 'px'}">
                <span  style="position:absolute;top:5px;right:5px;width:20px;height:20px;line-height:20px;text-align:center;background:black;color:white;-webkit-user-select:none;user-select:none;" @click="delet(index)">X</span>
                <span class="leftTop kuai" @mousedown.stop.self="change(index, 'leftTop', $event)"></span>
                <span class="leftBottom kuai" @mousedown.stop.self="change(index, 'leftBottom', $event)"></span>
                <span class="leftCenter kuai" @mousedown.stop.self="change(index, 'leftCenter',  $event)"></span>
                <span class="rightTop kuai" @mousedown.stop.self="change(index, 'rightTop',  $event)"></span>
                <span class="rightBottom kuai" @mousedown.stop.self="change(index, 'rightBottom',  $event)"></span>
                <span class="rightCenter kuai" @mousedown.stop.self="change(index, 'rightCenter',  $event)"></span>
                <span class="topCenter kuai" @mousedown.stop.self="change(index, 'topCenter',  $event)"></span>
                <span class="bottomCenter kuai" @mousedown.stop.self="change(index, 'bottomCenter',  $event)"></span>
            </div>
        </el-form>
        <el-button type="primarry" @click="writeCanvas">画图</el-button>
        <el-button type="primarry" @click="resetCanvas">重置</el-button>
        <div slot="footer" class="dialog-footer flexRow">
            <!-- <div v-if="WireList.id === ''" class="notesBottom">
                注：为保证功能配置的顺利，需确保勾选想要配置的选项
            </div> -->
            <bt class="bt flexNum" ref="bt" :buttonList="topButton" @operation="changeStatus"></bt>
        </div>
    </el-dialog>
</template>
<style>

.el-dialog__body{
    padding: 0 !important;
}
.kuai{
 display: block;
    width: 5px;
    height: 5px;
    border: 1px solid black;
}
.leftTop{
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%,-50%);
    cursor: nw-resize;
}
.leftCenter{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    cursor: w-resize;
}
.leftBottom{
    position: absolute;
    top:  100%;
    left: 0;
    transform: translate(-50%, -50%);
    /* transform: translateY(-50%); */
    cursor: sw-resize;
}
.rightTop{
    position: absolute;
    top: 0px;
    left: 100%;
    transform: translate(-50%, -50%);
    cursor: ne-resize;
}
.rightCenter{
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
    cursor: e-resize;
}
.rightBottom{
    position: absolute;
    top: 100%;
    left: 100%;
    transform: translate(-50%, -50%);
    cursor: se-resize;
}
.topCenter{
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: n-resize;
}
.bottomCenter{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: s-resize;
}
</style>


<script>
export default {
    name: "Wire",
    props: ["WireList"],
    model:{
        click: "WireButton"
    },
    data() {
        return {
            ruleValidate: {},
            formValidate: {},
            topButton:[
                {
                    title:"提交"
                },
                {
                    title:"取消"
                }
            ],
            write: false,
            draws:[]
        };
    },
    methods: {
        changeStatus(){
            this.$emit("WireButton")
        },
        created(){
           
        },
        getData() {

        },
        writeCanvas(){
            var write = "";
            var draw = false;
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            var startX = "";
            var startY = "";
            var overX = "";
            var overY = "";
            var timeoutID= null;
            ctx.strokeStyle="#0000ff";
            c.onmouseup = function(){
                if(write === ""){
                    write = true;  
                }         
            }
            c.onclick= function(e){
               if(write && write == true && draw !==true){
                        overX = "";
                        overY = "";
                        startX = e.offsetX;
                        startY = e.offsetY;
                        draw = true;
                    }
            }
            c.onmousemove = (e) =>{
                if(write && write == true){
                    ctx.clearRect(0,0,1000,500);
                    overX = e.offsetX - startX;
                    overY = e.offsetY - startY;    
                    ctx.strokeRect(startX,startY,overX,overY);             
                }
            }
            c.ondblclick = (e) => {
                ctx.clearRect(0,0,1000,500);
                console.log(startX,startY,startX+overX,startY+overY)
                
                write = false;
                draw = false;   
                var h = document.getElementsByClassName("el-dialog__header")[0];
                console.log(h)
                var parent = document.getElementsByClassName("demo-ruleForm")[0];
                var child = document.createElement("div")
                this.draws.push({
                    width: overX,
                    height: overY ,
                    top: startY,
                    left: startX
                })
                overX = "";
                overY = "";
            }
            
        },
        resetCanvas() {
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.clearRect(0,0,1000,500);  
        },
        delet(index){
            console.log(index)
            this.draws.splice(index,1);
        },
        change(index, direction, event) {
            let startX = event.clientX;
            let startY = event.clientY;
            let moveX;
            let moveY;
            var span = document.getElementsByClassName(direction);
            var draws = this.draws;
            var startDraw = JSON.parse(JSON.stringify(this.draws));
            document.onmousemove = function(e){
                let movewidth = e.clientX - startX;
                let moveheight = e.clientY - startY;
                if(direction === "leftTop"){
                    draws[index].left =  startDraw[index].left + movewidth ;
                    draws[index].top = startDraw[index].top + moveheight;
                    draws[index].width = startDraw[index].width - movewidth;
                    draws[index].height = startDraw[index].height - moveheight;
                }
                if(direction === "leftCenter"){
                    draws[index].left =  startDraw[index].left + movewidth ;
                    draws[index].width = startDraw[index].width - movewidth;
                }
                if(direction === "leftBottom"){
                    draws[index].left =  startDraw[index].left + movewidth ;
                    draws[index].width = startDraw[index].width - movewidth;
                    draws[index].height = startDraw[index].height + moveheight;
                }
                if(direction === "rightTop"){
                    draws[index].top = startDraw[index].top + moveheight;
                    draws[index].width = startDraw[index].width + movewidth;
                    draws[index].height = startDraw[index].height - moveheight;
                }
                if(direction === "rightCenter"){
                    draws[index].width = startDraw[index].width + movewidth;
                }
                if(direction === "rightBottom"){
                    draws[index].width = startDraw[index].width + movewidth;
                    draws[index].height = startDraw[index].height + moveheight;
                }
                if(direction === "topCenter"){
                    draws[index].top = startDraw[index].top + moveheight;
                    draws[index].height = startDraw[index].height - moveheight;
                }
                if(direction === "bottomCenter"){
                    draws[index].height = startDraw[index].height + moveheight;
                }
                
            }
            document.onmouseup = function(){
                document.onmousemove = null;
            }
            
        }
    }
};
</script>
